<template>
  <div>
    <div class="base-info-title">
      <div
        class="float-left"
        style="padding: 4px 0;">
        <!--<img src="/static/images/icon_pohto_male.png" alt="">-->
        <!--<span>{{userInfo.name}}</span>-->
        <!--<div class="clear-both"></div>-->
      </div>
      <div class="float-right">
        <el-button @click="getCollegeColumn">{{ $t('student.collegeModifyFields') }}</el-button>
        <el-button @click="getSchoolColumn">{{ $t('student.schoolModifyFields') }}</el-button>
        <el-button @click="getEidtColumn">{{ $t('student.baseModifyFields') }}</el-button>
        <el-button
          type="primary"
          @click="applyAbnormal">{{ $t('student.applicationForAlteration') }}</el-button>
      </div>
    </div>
    <div class="pd-12px">
      <el-form ref="dynamicValidateForm" :model="dynamicValidateForm" label-position="left" label-width="100px">
        <el-row :gutter="20">
          <el-col v-for="(item, index) in dynamicValidateForm.inputSelectDates" :key="item.columnValue" :span="6">
            <el-form-item
              v-if="item.type == 'input'"
              :label="item.nameZH"
              :prop="'inputSelectDates.' + index + '.columnValue'"
              :rules="{
                min: 0, max: item.length, message: '长度在 3 到 ' + item.length + ' 个字符', trigger: 'blur'
            }">
              <span
                v-show="!isEdit"
                style="display: inline-block; height: 24px; overflow: hidden;">
                {{ item.columnValue }}
              </span>
              <el-input
                v-show="isEdit"
                v-model="item.columnValue"
                :disabled="item.configType !== 2"
                style="width: 100%;"/>
            </el-form-item>
            <el-form-item
              v-if="item.type == 'select'"
              :label="item.nameZH"
              :prop="'inputSelectDates.' + index + '.columnValue'">
              <span
                v-show="!isEdit "
                style="display: inline-block; height: 24px; overflow: hidden;">
                {{ item.selectValue }}
              </span>
              <el-select
                v-show="isEdit"
                v-model="item.columnValue"
                :disabled="item.configType !== 2"
                filterable
                clearable
                style="width: 100%;">
                <el-option
                  v-for="item in item.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
            <el-form-item
              v-if="item.type == 'date'"
              :label="item.nameZH"
              :prop="'inputSelectDates.' + index + '.columnValue'">
              <span v-show="!isEdit">{{ item.columnValue | formatDate }}</span>
              <el-date-picker
                v-show="isEdit"
                v-model="item.columnValue"
                :disabled="item.configType !== 2"
                type="date"
                format="yyyy 年 MM 月 dd 日"
                value-format="timestamp"
                style="width: 100%;"/>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <div class="edu-auto-row">
          <div
            v-for="(item, index) in dynamicValidateForm.inputSelectDates"
            :key="index"
            class="edu-auto-col col">
            <el-tooltip
              v-if="item.nameZH.length > 5"
              :content="item.nameZH"
              placement="top"
              effect="light">
              <div class="edu-auto-label">
                {{ item.nameZH }}：
              </div>
            </el-tooltip>
            <div
              v-else
              class="edu-auto-label">
              {{ item.nameZH }}：
            </div>
            <div class="edu-auto-content">
              <span v-show="!isEdit && item.type !== 'date' && item.type !== 'select'">{{ item.columnValue }}</span>
              <span v-show="!isEdit && item.type != 'date' && item.type == 'select' ">{{ item.selectValue }}</span>
              <span v-show="!isEdit && item.type == 'date' ">{{ item.columnValue | formatDate }}</span>
              <el-input
                v-show="isEdit && item.type == 'input'"
                v-model="item.columnValue"
                :disabled="item.configType !== 2"
                style="width: 100%;"/>
              <el-select
                v-show="isEdit && item.type == 'select'"
                v-model="item.columnValue"
                :disabled="item.configType !== 2"
                filterable
                clearable
                style="width: 100%;">
                <el-option
                  v-for="item in item.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
              <el-date-picker
                v-show="isEdit && item.type == 'date'"
                v-model="item.columnValue"
                :disabled="item.configType !== 2"
                type="date"
                format="yyyy 年 MM 月 dd 日"
                value-format="timestamp"
                style="width: 100%;"/>
            </div>
          </div>
        </div> -->
        <div
          v-if="textareas.length != 0"
          class="hr"/>
        <el-row :gutter="20">
          <el-col v-for="(item, index) in dynamicValidateForm.textareas" :key="item.columnValue" :span="12">
            <el-form-item
              :label="item.nameZH"
              :prop="'textareas.' + index + '.columnValue'">
              <span v-if="!isEdit || item.configType === 1">{{ item.columnValue }}</span>
              <el-input
                v-show="isEdit"
                :rows="3"
                v-model="item.columnValue"
                :disabled="item.configType !== 2"
                type="textarea"
                style="width: 100%;"/>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <div class="edu-auto-row">
          <div
            v-for="(item, index) in dynamicValidateForm.textareas"
            :key="index"
            class="edu-auto-col">
            <div class="edu-auto-label text-label">
              {{ item.nameZH }}：
            </div>
            <div class="edu-auto-content text-content">
              <span v-if="!isEdit || item.configType === 1">{{ item.columnValue }}</span>
              <el-input
                v-show="isEdit"
                :rows="3"
                v-model="item.columnValue"
                :disabled="item.configType !== 2"
                type="textarea"
                style="width: 100%;"/>
            </div>
          </div>
        </div> -->
        <div
          v-if="images.length != 0"
          class="hr"/>
        <div class="edu-auto-row">
          <div
            v-for="(item, index) in dynamicValidateForm.images"
            :key="index"
            class="edu-auto-col">
            <el-tooltip
              v-if="item.nameZH.length > 5"
              :content="item.nameZH"
              placement="top"
              effect="light">
              <div class="edu-auto-label">
                {{ item.nameZH }}：
              </div>
            </el-tooltip>
            <div
              v-else
              class="edu-auto-label">
              {{ item.nameZH }}：
            </div>
            <div class="edu-auto-content">
              <div
                v-if="!isEdit || item.configType === 1"
                class="img-box">
                <img
                  :src="item.imageBase"
                  alt="">
              </div>
              <div v-show="isEdit && item.configType === 2">
                <el-upload
                  :data="{bucketname: 'face', folderpath: 'image'}"
                  :on-success="handleBaseImageSuccess"
                  :show-file-list="false"
                  class="avatar-uploader"
                  action="/api/commonservice/obsfile/uploadimage">
                  <img
                    v-if="baseImageUrl"
                    :src="baseImageUrl"
                    class="avatar">
                  <i
                    v-else
                    class="el-icon-plus avatar-uploader-icon"/>
                </el-upload>
              </div>
            <!-- <span>{{item.columnValue}}</span> -->
            </div>
          </div>
        </div>
      </el-form>
    </div>

    <el-row v-if="isEdit">
      <el-col :span="24">
        <div class="float-right">
          <el-button @click="isEdit = false">{{ $t('common.btn.cancel') }}</el-button>
          <el-button
            type="primary"
            @click="save('dynamicValidateForm')">{{ $t('common.btn.save') }}</el-button>
        </div>
      </el-col>
    </el-row>

    <el-dialog
      :visible.sync="collegeVisible"
      :title="$t('student.collegeModifyFields')"
      width="50%">
      <div class="edu-auto-row">
        <div
          v-for="(item, index) in eduInputSelectDates"
          :key="index"
          class="edu-auto-col">
          <el-tooltip
            v-if="item.nameZH.length > 4"
            :content="item.nameZH"
            placement="top"
            effect="light">
            <div class="edu-auto-label">
              {{ item.nameZH }}：
            </div>
          </el-tooltip>
          <div
            v-else
            class="edu-auto-label">
            {{ item.nameZH }}：
          </div>
          <div class="edu-auto-content">
            <el-input
              v-if="item.type == 'input'"
              v-model="item.columnValue"
              style="width: 100%;"/>
            <el-select
              v-if="item.type == 'select'"
              v-model="item.columnValue"
              style="width: 100%;">
              <el-option
                v-for="(option, key, index) in item.options"
                :key="index"
                :label="option"
                :value="key"/>
            </el-select>
            <el-date-picker
              v-if="item.type == 'date'"
              v-model="item.columnValue"
              type="date"
              format="yyyy 年 MM 月 dd 日"
              value-format="timestamp"
              style="width: 100%;"/>
          </div>
        </div>
      </div>
      <div
        v-if="eduTextareas.length != 0"
        class="hr"/>
      <div class="edu-auto-row">
        <div
          v-for="(item, index) in eduTextareas"
          :key="index"
          class="edu-auto-col full-col">
          <div class="edu-auto-label text-label">
            {{ item.nameZH }}：
          </div>
          <div class="edu-auto-content text-content">
            <el-input
              :rows="3"
              v-model="item.columnValue"
              type="textarea"
              style="width: 100%;min-height: 80px;"/>
          </div>
        </div>
      </div>
      <div
        v-if="eduImages.length != 0"
        class="hr"/>
      <div class="edu-auto-row">
        <div
          v-for="(item, index) in eduImages"
          :key="index"
          class="edu-auto-col full-col">
          <el-tooltip
            v-if="item.nameZH.length > 4"
            :content="item.nameZH"
            placement="top"
            effect="light">
            <div class="edu-auto-label">
              {{ item.nameZH }}：
            </div>
          </el-tooltip>
          <div
            v-else
            class="edu-auto-label">
            {{ item.nameZH }}：
          </div>
          <div class="edu-auto-content">
            {{ item.columnValue }}
          </div>
        </div>
      </div>
      <div class="hr"/>
      <div class="edu-auto-row">
        <div class="edu-auto-col full-col">
          <div class="edu-auto-label require">
            {{ $t('student.materialDescription') }}：
          </div>
          <div class="edu-auto-content">
            <el-input
              :rows="3"
              v-model="saveAcaEdu.editExplain"
              :placeholder="$t('common.pla.pleaseInput')"
              type="textarea"
              style="width: 100%;min-height: 80px;"/>
          </div>
        </div>
      </div>
      <div class="edu-auto-row">
        <div class="edu-auto-col">
          <div class="edu-auto-label require">
            {{ $t('student.proveMaterial') }}：
          </div>
          <div class="edu-auto-content">
            <el-upload
              :headers="{'X-Token': $store.state.session.sessionid}"
              :data="{bucketname: 'face', folderpath: 'file'}"
              :on-preview="handleCollegeAvatarPreview"
              :on-remove="handleCollegeAvatarRemove"
              :on-success="handleCollegeAvatarSuccess"
              :file-list="collegeFileList"
              class="upload-demo"
              action="/api/commonservice/obsfile/uploadfile"
              multiple>
              <el-button
                size="small"
                type="primary">{{ $t('common.btn.clickUpload') }}</el-button>
            </el-upload>
          </div>
        </div>
      </div>
      <span
        slot="footer"
        class="dialog-footer">
        <el-button @click="collegeVisible = false">{{ $t('common.btn.cancel') }}</el-button>
        <el-button
          type="primary"
          @click="submitCollege">{{ $t('common.btn.confirm') }}</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :visible.sync="schoolVisible"
      title="校审字段修改"
      width="50%">
      <div class="edu-auto-row">
        <div
          v-for="(item, index) in eduInputSelectDates"
          :key="index"
          class="edu-auto-col">
          <el-tooltip
            v-if="item.nameZH.length > 4"
            :content="item.nameZH"
            placement="top"
            effect="light">
            <div class="edu-auto-label">
              {{ item.nameZH }}：
            </div>
          </el-tooltip>
          <div
            v-else
            class="edu-auto-label">
            {{ item.nameZH }}：
          </div>
          <div class="edu-auto-content">
            <el-input
              v-if="item.type == 'input'"
              v-model="item.columnValue"
              placeholder="请输入内容"
              style="width: 100%;"/>
            <el-select
              v-if="item.type == 'select'"
              v-model="item.columnValue"
              placeholder="请输入内容"
              style="width: 100%;">
              <el-option
                v-for="(option, key, index) in item.options"
                v-if="item.options"
                :key="index"
                :label="option"
                :value="key"/>
            </el-select>
            <el-date-picker
              v-if="item.type == 'date'"
              v-model="item.columnValue"
              type="date"
              placeholder="选择日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="timestamp"
              style="width: 100%;"/>
          </div>
        </div>
      </div>
      <div
        v-if="eduTextareas.length != 0"
        class="hr"/>
      <div class="edu-auto-row">
        <div
          v-for="(item, index) in eduTextareas"
          :key="index"
          class="edu-auto-col full-col">
          <div class="edu-auto-label text-label">
            <el-form-item
              :prop="item.nameZH"
              :rules="[
                { required: true, message: '不能为空'}
              ]"
            >
              {{ item.nameZH }}：
            </el-form-item>
          </div>
          <div class="edu-auto-content text-content">
            <el-input
              :rows="3"
              v-model="item.columnValue"
              type="textarea"
              placeholder="请输入内容"
              style="width: 100%;min-height: 80px;"/>
          </div>
        </div>
      </div>
      <div
        v-if="eduImages.length != 0"
        class="hr"/>
      <div class="edu-auto-row">
        <div
          v-for="(item, index) in eduImages"
          :key="index"
          class="edu-auto-col full-col">
          <div class="edu-auto-label">{{ item.nameZH }}：</div>
          <div class="edu-auto-content">
            {{ item.columnValue }}
          </div>
        </div>
      </div>
      <div class="hr"/>
      <div class="edu-auto-row">
        <div class="edu-auto-col full-col">
          <div class="edu-auto-label require">
            材料说明：
          </div>
          <div class="edu-auto-content">
            <el-input
              :rows="3"
              v-model="saveAcaEdu.editExplain"
              type="textarea"
              placeholder="请输入内容"
              style="width: 100%;min-height: 80px;"/>
          </div>
        </div>
      </div>
      <div class="edu-auto-row">
        <div class="edu-auto-col">
          <div class="edu-auto-label require">
            证明材料：
          </div>
          <div class="edu-auto-content">
            <el-upload
              :headers="{'X-Token': $store.state.session.sessionid}"
              :data="{bucketname: 'face', folderpath: 'file'}"
              :on-preview="handleSchoolAvatarPreview"
              :on-remove="handleSchoolAvatarRemove"
              :on-success="handleSchoolAvatarSuccess"
              :file-list="schoolFileList"
              class="upload-demo"
              action="/api/commonservice/obsfile/uploadfile"
              multiple>
              <el-button
                size="small"
                type="primary">{{ $t('common.btn.clickUpload') }}</el-button>
                <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
            </el-upload>
          </div>
        </div>
      </div>
      <span
        slot="footer"
        class="dialog-footer">
        <el-button @click="schoolVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="submitSchool">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :visible.sync="abnormalVisible"
      title="异动申请"
      width="50%">
      <el-form
        ref="abnormalform"
        :model="abnormalform"
        :rules="abnormalRules"
        label-width="120px">
        <el-form-item
          label="异动类型："
          prop="abnormalTypeId">
          <el-col :span="8">
            <el-select
              v-model="abnormalform.abnormalTypeId"
              placeholder="请选择异动类型"
              style="100%">
              <el-option
                v-for="(item, idx) in abnormalOptions"
                :key="idx"
                :label="item.className"
                :value="item.id"/>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item
          label="校历："
          prop="schoolTermIds">
          <el-col :span="8">
            <el-select
              v-model="abnormalform.schoolTermIds"
              multiple
              placeholder="请选择学年">
              <el-option
                v-for="item in calendarOptions"
                :key="item.value"
                :label="item.fullName"
                :value="item.id"/>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item
          label="备注："
          prop="reason">
          <el-input
            v-model="abnormalform.reason"
            type="textarea"/>
        </el-form-item>
        <el-form-item label="附件：">
          <el-upload
            :headers="{'X-Token': $store.state.session.sessionid}"
            :data="{bucketname: 'face', folderpath: 'file'}"
            :on-preview="handleAvatarPreview"
            :on-remove="handleAvatarRemove"
            :on-success="handleAbnormalAvatarSuccess"
            :file-list="abnormalFileList"
            class="upload-demo"
            action="/api/commonservice/obsfile/uploadfile"
            multiple>
            <el-button
              size="small"
              type="primary">点击上传</el-button>
              <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
          </el-upload>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer">
        <el-button @click="handleAbnormalReset('abnormalform')">取 消</el-button>
        <el-button
          type="primary"
          @click="handleAbnormalSubmit('abnormalform')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  saveEdit,
  getEidtAcaEduColumn,
  saveEditAcaEduColumnVal,
  getStudentInfo,
  getAbnormalList,
  abnormalApply
} from 'common/src/api/studentinfo'
import Calendars from 'common/src/api/calendars.js'
import { queryDic } from 'common/src/api/dictionary.js'
import { downloadimage } from 'common/src/api/upload'
import Bus from 'common/src/utils/bus'
import { mapState } from 'vuex'
import filters from 'common/src/filters'

export default {
  name: 'Information',
  filters: {
    formatDate(date) {
      return filters.formatDate(date, 'yyyy/MM/dd')
    }
  },
  props: ['userInfo', 'tableName'],
  data() {
    return {
      isEdit: false,
      collegeVisible: false,
      schoolVisible: false,
      abnormalVisible: false,
      info: [],
      inputSelectDates: [],
      selects: {},
      textareas: [],
      images: [],
      dynamicValidateForm: {},
      eduInputSelectDates: [],
      eduTextareas: [],
      eduImages: [],
      collegeFileList: [],
      schoolFileList: [],
      abnormalFileList: [],
      currentUserId: '',
      baseImageUrl: '',
      saveInfo: {
        table: '',
        studentId: '',
        type: '1',
        viewColumn: ''
      },
      saveAcaEdu: {
        type: '',
        editExplain: '修改说明',
        evidenceList: [],
        beanList: [],
        beforeList: []
      },
      abnormalOptions: [],
      calendarOptions: [],
      abnormalform: {
        abnormalTypeId: 1,
        reason: '',
        schoolTermIds: [],
        formData: {},
        evidenceList: []
      },
      abnormalRules: {
        abnormalTypeId: [
          { required: true, message: '请选择异动类型', trigger: 'blur' }
        ],
        schoolTermIds: [
          { required: true, message: '请选择学年', trigger: 'blur' }
        ],
        reason: [
          { required: true, message: '请输入原因', trigger: 'blur' }
        ],
        evidenceList: [
          { required: false, message: '请上传附件', trigger: 'blur' }
        ]
      },
      options: {}
    }
  },
  computed: {
    ...mapState({
      mockUser: state => state.session.mockUser
    })
  },
  watch: {
    userInfo: function(val, oldval) {
      this.formatUserInfo()
      this.isEdit = false
    }
  },
  created() {
    const studentId = this.$route.params.id
    if (studentId) {
      this.currentUserId = studentId
    } else {
      this.currentUserId = this.mockUser ? this.mockUser.uid : localStorage.getItem('uid')
    }
  },
  methods: {
    getStudentName() {
      this.userInfo.columnList.forEach(item => {
        if (item.nameZH === '姓名') {
          this.userInfo.name = item.columnValue
        }
      })
    },
    async getEidtColumn() {
      this.isEdit = true
    },
    _clearSubmitObj() {
      this.collegeFileList = []
      this.schoolFileList = []
      this.saveAcaEdu.editExplain = ''
      this.saveAcaEdu.evidenceList = []
    },
    async getCollegeColumn() {
      this.saveAcaEdu.type = 9
      this.eduInputSelectDates = []
      this.eduTextareas = []
      this.eduImages = []
      this._clearSubmitObj()
      this.collegeVisible = true
      this.getEidtAcaEdu(9)
    },
    async getSchoolColumn() {
      this.saveAcaEdu.type = 10
      this.eduInputSelectDates = []
      this.eduTextareas = []
      this.eduImages = []
      this._clearSubmitObj()
      this.schoolVisible = true
      this.getEidtAcaEdu(10)
    },
    async getStudentBaseInfo() {
      const query = {
        table: 'student_basic_information_t',
        studentId: this.currentUserId,
        type: 1
      }

      const baseInfo = await getStudentInfo(query)
      if (baseInfo && baseInfo.data) {
        baseInfo.data[0].columnList.forEach(item => {
          item.isEdit = false
        })
        this.info = baseInfo.data[0].columnList
      }
    },
    save(formName) {
      this.saveInfo.table = this.tableName
      this.saveInfo.studentId = this.currentUserId

      const listInputSelectDate = _.filter(this.inputSelectDates, { configType: 2 })
      const lisTextareas = _.filter(this.textareas, { configType: 2 })
      const listImages = _.filter(this.images, { configType: 2 })
      const columnList = []
      if (listInputSelectDate.length > 0) {
        listInputSelectDate.forEach(item => {
          const obj = {
            column: item.column,
            columnValue: item.columnValue
          }
          columnList.push(obj)
        })
      }
      if (lisTextareas.length > 0) {
        lisTextareas.forEach(item => {
          const obj = {
            column: item.column,
            columnValue: item.columnValue
          }
          columnList.push(obj)
        })
      }
      if (listImages.length > 0) {
        listImages.forEach(item => {
          const obj = {
            column: item.column,
            columnValue: item.columnValue
          }
          columnList.push(obj)
        })
      }
      const obj = {
        id: this.userInfo.id,
        columnList: columnList
      }
      this.saveInfo.viewColumn = obj

      this.$refs[formName].validate((valid) => {
        if (valid) {
          saveEdit(this.saveInfo).then(res => {
            if (res.code === 200) {
              Bus.$emit('userInfoUpdate')
              this.$message({
                message: '更新成功',
                type: 'success'
              })
              this.isEdit = false
            }
          })
        }
      })
    },
    async formatUserInfo() {
      const self = this
      const inputSelectDates = []
      const textareas = []
      const images = []
      this.inputSelectDates = []
      this.textareas = []
      this.images = []
      const selects = []
      const columns = this.userInfo.columnList
      for (const item of columns) {
        if (item.type === 'input' || item.type === 'date') {
          inputSelectDates.push(item)
        }
        if (item.type === 'select') {
          inputSelectDates.push(item)
          if (item.value) {
            selects.push(item.value)
          }
        }
        if (item.type === 'textarea') {
          textareas.push(item)
        }
        // 优化处理图片下载逻辑
        if (item.type === 'image' && !!item.columnValue) {
          try {
            const res = await downloadimage(item.columnValue)
            if (res && res.data) {
              item.imageBase = res.data.base
            } else {
              item.imageBase = ''
            } 
          } catch(error) {
            item.imageBase = ''
          }
          // item.imageBase = ''
          images.push(item)
        }
      }
      if (selects.length !== 0) {
        queryDic({
          lang: this.$store.getters.language || 'cn',
          type: 'allChild',
          keys: selects
        }).then(function(res) {
          if (res && res.data) {
            self.inputSelectDates = self.__selOptSetting(inputSelectDates, res.data)
          }
          self.textareas = textareas
          self.images = images
        })
      } else {
        self.inputSelectDates = inputSelectDates
        self.textareas = textareas
        self.images = images
      }
      this.dynamicValidateForm.inputSelectDates = inputSelectDates
      this.dynamicValidateForm.textareas = textareas
      this.dynamicValidateForm.images = images
    },
    __selOptSetting(arr, dicDatas) {
      if (!arr) return
      const newArr = []
      _.forEach(arr, (item) => {
        item.selectValue = dicDatas[item.value]
          ? dicDatas[item.value][item.columnValue]
          : ''
        if (dicDatas[item.value]) {
          item.options = []
          for (const key in dicDatas[item.value]) {
            item.options.push({
              value: key,
              label: dicDatas[item.value][key]
            })
          }
        }
        newArr.push(_.cloneDeep(item))
      })
      return newArr
    },
    async eduFormatUserInfo(table, columnList) {
      const columns = columnList.columnList
      columns.forEach(item => {
        if (
          item.type === 'input' ||
          item.type === 'select' ||
          item.type === 'date'
        ) {
          this.eduInputSelectDates.push(item)
        }
        if (item.type === 'textarea') {
          this.eduTextareas.push(item)
        }
        if (item.type === 'image') {
          this.eduImages.push(item)
        }
        if (item.type === 'select') {
          item.columnValue = item.columnValue == null ? '' : item.columnValue + ''
          this.getSelectOptions(item)
        }
      })
      this.saveAcaEdu.beanList.push({
        table: table,
        studentId: this.currentUserId,
        viewColumn: columnList
      })
    },
    async getSelectOptions(item) {
      if (!item.value) return
      const options = await queryDic({
        lang: 'cn',
        type: 'allChild',
        keys: [item.value]
      })
      if (options && options.data) {
        item.options = options.data[item.value]
        this.$forceUpdate()
      }
    },
    async getEidtAcaEdu(type) {
      this.saveAcaEdu.beforeList = []
      this.saveAcaEdu.beanList = []
      const query = {
        configOptionsId: type,
        studentId: this.currentUserId
      }
      const res = await getEidtAcaEduColumn(query)
      if (res && res.data) {
        const newData = _.cloneDeep(res.data)
        for (const key in newData) {
          this.saveAcaEdu.beforeList.push({
            table: key,
            studentId: this.currentUserId,
            viewColumn: newData[key]
          })
          this.eduFormatUserInfo(key, res.data[key])
        }
      }
    },
    submitCollege() {
      if (this.collegeFileList.length === 0 || this.saveAcaEdu.editExplain === '') {
        this.$message({
          message: '材料说明和证明材料不能为空！',
          type: 'warning'
        })
        return
      }
      saveEditAcaEduColumnVal(this.saveAcaEdu).then(res => {
        if (res.code === 200) {
          this.$message({
            message: '提交成功',
            type: 'success'
          })
          this.$router.push('/StudentRollCheck')
        } else {
          this.$message({
            message: res.msg,
            type: 'warning'
          })
        }
        this.collegeVisible = false
        this.schoolVisible = false
      })
    },
    submitSchool() {
      if (this.schoolFileList.length === 0 || this.saveAcaEdu.editExplain === '') {
        this.$message({
          message: '材料说明和证明材料不能为空！',
          type: 'warning'
        })
        return
      }
      saveEditAcaEduColumnVal(this.saveAcaEdu).then(res => {
        if (res.code === 200) {
          this.$message({
            message: '提交成功',
            type: 'success'
          })
          this.$router.push('/StudentRollCheck')
        } else {
          this.$message({
            message: res.msg,
            type: 'warning'
          })
        }
        this.collegeVisible = false
        this.schoolVisible = false
      })
    },
    _handleFilterfile(fileList) {
      const fileNames = []
      _.forEach(fileList, (item) => {
        fileNames.push(item.response.data[item.name].objectkey)
      })
      return fileNames
    },
    handleCollegeAvatarSuccess(res, file, fileList) {
      this.collegeFileList = fileList
      this.saveAcaEdu.evidenceList = this._handleFilterfile(fileList)
    },
    handleCollegeAvatarRemove(file, fileList) {
      this.collegeFileList = fileList
      this.saveAcaEdu.evidenceList = this._handleFilterfile(fileList)
    },
    handleCollegeAvatarPreview(file) {},
    handleSchoolAvatarSuccess(res, file, fileList) {
      this.collegeFileList = fileList
      this.saveAcaEdu.evidenceList = this._handleFilterfile(fileList)
    },
    handleSchoolAvatarRemove(file, fileList) {
      this.collegeFileList = fileList
      this.saveAcaEdu.evidenceList = this._handleFilterfile(fileList)
    },
    handleSchoolAvatarPreview(file) {},
    getOptions(event, item) {
      if (item.value) {
        queryDic({
          lang: 'cn',
          type: 'allChild',
          keys: [item.value]
        }).then(res => {
          item.options = res.data[item.value]
          this.$forceUpdate()
        })
      }
    },
    // async getStudentBaseInfo(query) {
    //   this.loading = true
    //   const baseInfo = await getStudentInfo(query)
    //   this.loading = false
    //   if (baseInfo && baseInfo.data) {
    //     this.userInfo = baseInfo.data
    //   }
    // },
    handleBaseImageSuccess(res, file) {
      // this.newerTask.picturePath = res.data.file.objectkey; column: "PHOTO_"
      this.userInfo.columnList.forEach((item) => {
        if (item.column === 'PHOTO_') {
          item.columnValue = res.data.file.objectkey
        }
      })
      console.log(this.userInfo)
      this.baseImageUrl = URL.createObjectURL(file.raw)
    },
    async getImageBase64(item) {
      const imgObj = {}
      if (item.type === 'image') {
        const res = await downloadimage(item.columnValue)
        if (res && res.data) {
          return res.data.base
        }
      }
    },
    applyAbnormal() {
      const calendarsList = Calendars.searchCalendarList({
        pageNum_: 1,
        pageSize_: 1000
      })
      const abnormalList = getAbnormalList({
        pageNum_: 1,
        pageSize_: 1000
      })

      Promise.all([calendarsList, abnormalList]).then(res => {
        console.log(res)
        this.abnormalOptions = res[1].data.list
        this.calendarOptions = res[0].data.list
        this.abnormalVisible = true
      })
    },
    handleAbnormalAvatarSuccess(res, file, fileList) {
      const fileObj = {
        name: file.name,
        objectkey: res.data[file.name].objectkey
      }
      this.abnormalFileList.push(fileObj)
      this.abnormalform.evidenceList.push(res.data[file.name].objectkey)
    },
    handleAbnormalReset(ref) {
      this.$refs[ref].resetFields()
      this.abnormalVisible = false
    },
    handleAbnormalSubmit(ref) {
      // if(this.abnormalFileList.length == 0) {
      //   this.$message({
      //       message: "异动材料不能为空！",
      //       type: "warning"
      //     });
      //     return;
      // }
      this.$refs[ref].validate((valid) => {
        if (valid) {
          abnormalApply(this.abnormalform).then(res => {
            this.$notify({
              title: '成功',
              message: '申请成功！',
              type: 'success'
            })
            this.$refs[ref].resetFields()
            this.abnormalVisible = false
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.item-group {
  width: 100%;
  height: 32px;
  float: left;
  font-size: 12px;
  label,
  span {
    display: inline-block;
    line-height: 32px;
  }
  label {
    /*width: 64px;*/
    text-align: right;
  }
}

.base-info-title {
  border-bottom: 1px solid #e5e5e5;
  height: 46px;
  overflow: hidden;
  img,
  span {
    display: inline-block;
    vertical-align: middle;
    /*margin-top: 12px;*/
  }
  img {
    width: 28px;
  }
  span {
    font-size: 16px;
    color: #262626;
  }
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  border: dashed 1px #d2d4d6;
}
.avatar {
  width: 80px;
  height: 80px;
  display: block;
  float: left;
  margin-right: 10px;
}
</style>
